<script lang="ts" setup>
import { LockOpen } from 'lucide-vue-next';

definePageMeta({
	layout: 'none',
}); // 隐藏导航栏

const router = useRouter();
let hasBackBeenCalled = false;

function back() {
	if (!hasBackBeenCalled) {
		router.back();
		hasBackBeenCalled = true;
	}
}
</script>

<template>
	<div>
		<FloatBack @click="back" />
		<!-- 忘记密码 -->
		<div
			class="w-full h-[100vh] lg:grid lg:grid-cols-2"
		>
			<div class="h-full flex items-center justify-center py-12">
				<div class="mx-auto grid w-[350px] gap-6">
					<div class="grid gap-5 text-center">
						<h1 class="text-3xl font-bold">
							忘记密码
						</h1>
						<p class="text-balance text-muted-foreground">
							输入您的邮箱地址或用户名以重设密码
						</p>
					</div>
					<div class="grid gap-5">
						<div class="grid gap-2">
							<Label for="email">邮箱/用户名</Label>
							<Input
								id="email"
								required
								type="email"
							/>
						</div>
						<Button
							class="w-full"
							type="submit"
						>
							<LockOpen class="w-4 h-4 mr-2" />
							重设密码
						</Button>
					</div>
					<div class=" text-center text-sm">
						再试一次？
						<a
							class="underline"
							href="/login"
						>
							立即登录
						</a>
					</div>
				</div>
			</div>
			<div class="hidden bg-muted lg:block lg:h-full">
				<img
					alt="Image"
					class="h-[100vh] w-full object-cover dark:brightness-[0.2] dark:grayscale"
					src="@/assets/image/cover.jpg"
				>
			</div>
		</div>
	</div>
</template>

<style lang="postcss" scoped>

</style>
